<template>
  <div id="DetailCommentInfo">
    <div class="Comment-size">
      <table>
        <tr v-for="(item, index) in paramInfo.rule.tables[0]" :key="index">
          <td
            v-for="(item, index) in paramInfo.rule.tables[0][index]"
            :key="index"
          >
            {{ item }}
          </td>
        </tr>
      </table>
    </div>
    <div class="product_info">
      <table>
        <tr v-for="(item, index) in paramInfo.info.set" :key="index">
          <td class="key">{{ item.key }}</td>
          <td class="value">{{ item.value }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailCommentInfo",
  props: {
    paramInfo: Object,
    default() {
      return {};
    },
  },
};
</script>

<style>
#DetailCommentInfo {
}
.Comment-size tr {
  display: inline-block;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
  height: 40px;
  line-height: 40px;
}
.Comment-size tr td {
  display: inline-block;
  width: 50px;
  text-align: left;
  font-size: 16px;
  color: #6a6464;
}
.Comment-size tr td:nth-child(n + 2) {
  margin-left: 50px;
}
.product_info {
  font-size: 14px;
}
.product_info tr {
  display: block;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
  height: 40px;
  line-height: 40px;
}
.product_info .key {
  color: #6a6464;
  margin-right: 50px;
}
.product_info .value {
  color: #ff6699;
  padding-left: 40px;
}
</style>